<template>
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <div class="list">
                        <Icon type="md-arrow-back" size="24" style="cursor: pointer;" @click="goBack" />
                        <span>收料磅单:</span>
                        <p >{{sendSupplierName}}</p>
                        <span style="margin-left:10px">(发料单位)</span>
                    </div>
                    <div class="list">
                        <el-button style="margin-right:20px;" :type="flag?'primary':'info'" @click="getCategoryType(0)" size="small" plain>全部磅单</el-button>
                        <el-button :type="!flag?'primary':'info'" @click="getCategoryType(1)" size="small" plain>超负差磅单</el-button>
                    </div>
                </div>
                <div class="table">
                    <div class="title1">
                        <div class="sub">
                            <span>收料时间</span>
                            <span>磅单编号</span>
                            <span>收料类型</span>
                            <span>发料单位名称</span>
                            <span>确认重量</span>
                            <span>操作</span>
                        </div>
                    </div>
                    <div v-for="(item,i) in list" :key="i" v-show="list.length>0">
                        <div class="title_sub">
                            <div class="tip" v-if="item.diffResult==-1"></div>
                            <div class="img">
                                <Icon type="ios-arrow-forward" size="24" style="cursor: pointer;" @click="getFlag(true,item,i)" v-if="mat_flag" />
                                <Icon type="ios-arrow-down" size="24" style="cursor: pointer;" @click="getFlag(false,item,i)" v-else-if="!mat_flag&&i == sub" />
                                <Icon type="ios-arrow-forward" size="24" style="cursor: pointer;" @click="getFlag(true,item,i)" v-else="mat_flag" />
                            </div>
                            <div class="item">
                                <span>{{item.time}}</span>
                                <span>{{item.code}}</span>
                                <span v-if="item.recvSendType == 101">采购</span>
                                <span v-if="item.recvSendType == 102">调入</span>
                                <span v-if="item.recvSendType == 103">甲供</span>
                                <span v-if="item.recvSendType == 301">直入直出</span>
                                <span>{{item.sendSupplierName}}</span>
                                <span>{{item.confirmWeight}}吨</span>
                                <span>
                                    <el-button @click.native.prevent="getDtails(item)" type="text" size="small">查看详情</el-button>
                                </span>
                            </div>
                        </div>
                        <div class="item_sub" v-if="i == sub">
                            <div class="sub">
                                <ul>
                                    <li>
                                        <p>
                                            <span>{{item.matName}}</span>
                                        </p>
                                        <p>
                                            <span>规格型号:</span>
                                            <span>{{item.spec}}{{item.model}}</span>
                                        </p>
                                    </li>
                                    <li>
                                        <p>
                                            <span>实际数量:</span>
                                            <span>{{item.actualAmount}}{{item.deliveryUnitName}}</span>
                                        </p>
                                        <p>
                                            <span>运单数量:</span>
                                            <span>{{item.deliveryAmount}}{{item.deliveryUnitName}}</span>
                                        </p>
                                    </li>
                                    <li class="diff">
                                        <p>
                                            <span>实际重量:</span>
                                            <span>{{item.actualWeight}}吨</span>
                                        </p>
                                        <p>
                                            <span>运单重量:</span>
                                            <span>{{item.deliveryWeight}}吨</span>
                                        </p>
                                        <img src="./../../assets/images/fmam/receive/diff1.png" v-if="item.diffResult ==-1" />
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div v-show="list.length == 0" class="no_data">
                        暂无数据
                    </div>
                </div>
                <div class="clearfix" v-show="list.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="detailsModal" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div class="title">
                <div class="item" v-if="detailsObj.source != 2">
                    <span>偏差结果:</span>
                    <span v-if="detailsObj.diffResult ==0">正常</span>
                    <span v-if="detailsObj.diffResult ==1">超正差</span>
                    <span v-if="detailsObj.diffResult ==-1">超负差</span>
                </div>
                <div class="item">
                    <span v-if="detailsObj.source == 2">单据编号:</span>
                    <span v-else>磅单编号:</span>
                    <span>{{detailsObj.code}}</span>
                </div>
                <div class="item">
                    <span>组织机构:</span>
                    <span>{{detailsObj.deptName}}</span>
                </div>
            </div>
            <hr />
            <div class="val">
                <h2>
                    <span v-if="detailsObj.source == 2">基本信息</span>
                    <span v-else>过磅信息</span>
                </h2>
                <div class="tip">
                    <div class="item" v-if="detailsObj.source == 2">
                        <span>收料人:</span>
                        <span>{{detailsObj.checkUserName}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source == 2">
                        <span>收料时间:</span>
                        <span>{{detailsObj.checkTime}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>称毛时间:</span>
                        <span>{{detailsObj.grossWeightTime}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>称皮时间:</span>
                        <span>{{detailsObj.tareWeightTime}}</span>
                    </div>
                    <div class="item">
                        <span>单据来源:</span>
                        <span v-if="detailsObj.source == 0">称重</span>
                        <span v-if="detailsObj.source == 1">补录</span>
                        <span v-if="detailsObj.source == 2">移动验收</span>
                    </div>
                </div>
                <div class="tip" v-if="detailsObj.source != 2">
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>进场称重人员:</span>
                        <span>{{detailsObj.grossUserName}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>出场称重人员:</span>
                        <span>{{detailsObj.tareUserName}}</span>
                    </div>
                    <div class="item" v-if="detailsObj.source != 2">
                        <span>打印次数:</span>
                        <span>{{detailsObj.printCnt}}</span>
                    </div>
                </div>
                <div class="tip">
                    <div class="item" >
                        <span>备注:</span>
                        <span>{{detailsObj.remark}}</span>
                    </div>
                </div>
            </div>
            <hr />
            <div class="val1">
                <h2>
                    <span v-if="detailsObj.source == 2">单据信息</span>
                    <span v-else>磅单信息</span>
                </h2>
                <div class="tip">
                    <p>磅单信息</p>
                    <div class="msg">
                        <div class="item">
                            <span>收料类型:</span>
                            <span v-if="detailsObj.recvSendType == 101">采购</span>
                            <span v-if="detailsObj.recvSendType == 102">调入</span>
                            <span v-if="detailsObj.recvSendType == 103">甲供</span>
                            <span v-if="detailsObj.recvSendType == 301">直入直出</span>
                        </div>
                        <div class="item" v-if="detailsObj.recvSendType == 301">
                            <span>发料单位:</span>
                            <span>{{detailsObj.sendSupplierName}}</span>
                        </div>
                        <div class="item">
                            <span>收料单位:</span>
                            <span>{{detailsObj.receiveSupplierName}}</span>
                        </div>
                        <div class="item">
                            <span>车牌号:</span>
                            <span>{{detailsObj.licensePlate}}</span>
                        </div>
                        <div class="item">
                            <span>库房:</span>
                            <span>{{detailsObj.warehouseName}}</span>
                        </div>
                        <div class="item">
                            <span>使用部位:</span>
                            <span>{{detailsObj.partName}}</span>
                        </div>
                    </div>
                    <hr />
                    <p>运单图片</p>
                    <div class="msg">
                        <div class="item">
                            <span>原始单据编号:</span>
                            <span>{{detailsObj.deliveryCode}}</span>
                        </div>
                    </div>
                    <ul>
                        <li v-for="(val,i) in imgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                    <hr />
                    <p>材料明细</p>
                    <div class="table">
                        <table class="create-table" style="margin-top:20px;">
                            <thead>
                                <tr>
                                    <th>材料</th>
                                    <th v-if="detailsObj.source == 2">批次编号</th>
                                    <th v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">运单数量</th>
                                    <th v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">实际数量</th>
                                    <th v-if="detailsObj.source == 2">确认数量</th>
                                    <th v-if="detailsObj.source != 2">数量</th>
                                    <th v-if="detailsObj.source != 2">重量（吨）</th>
                                    <th v-if="detailsObj.source != 2">扣量（吨）</th>
                                    <th v-if="detailsObj.source != 2">偏差</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in noteMatList" :key="index">
                                    <td>
                                        <div>{{item.matName}}</div>
                                        <div>
                                            <span>规格型号:</span>
                                            <span>{{item.spec}}{{item.model}}</span>
                                        </div>
                                        <div>
                                            <span>材料编码:</span>
                                            <span>{{item.matCode}}</span>
                                        </div>
                                    </td>
                                    <td v-if="detailsObj.source == 2">{{item.batchCode}}</td>
                                    <td v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">{{item.deliveryAmount}}{{item.deliveryUnitName}}</td>
                                    <td v-if="detailsObj.recvSendType == 301 && detailsObj.source == 2">{{item.actualAmount}}{{item.deliveryUnitName}}</td>
                                    <td v-if="detailsObj.source == 2">{{item.confirmAmount}}{{item.deliveryUnitName}}</td>
                                    <td v-if="detailsObj.source != 2">
                                        <div>{{item.actualAmount}}{{item.deliveryUnitName}}</div>
                                        <div>
                                            <span>运单:</span>
                                            <span>{{item.deliveryAmount}}{{item.deliveryUnitName}}</span>
                                        </div>
                                    </td>
                                    <td v-if="detailsObj.source != 2">
                                        <div>{{item.actualWeight}}吨</div>
                                        <div>
                                            <span>运单:</span>
                                            <span>{{item.deliveryWeight}}吨</span>
                                        </div>
                                    </td>
                                    <td v-if="detailsObj.source != 2">{{item.deductAmount}}</td>
                                    <td v-if="detailsObj.source != 2">
                                        <div>
                                            <span v-if="item.diffType == 1">{{item.actualDiff}}</span>
                                            <span v-if="item.diffType == 2">{{item.actualDiff}}%</span>
                                        </div>
                                        <div>
                                            <span v-if="item.diffType == 1">正负差标准:</span>
                                            <span v-if="item.diffType == 2">比例偏差:</span>
                                            <span v-if="item.diffType == 1">{{item.plusDiff}},</span>
                                            <span v-if="item.diffType == 1">{{item.minusDiff}}</span>
                                            <span v-if="item.diffType == 2">{{item.plusDiff}}%,</span>
                                            <span v-if="item.diffType == 2">{{item.minusDiff}}%</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>毛重:</span>
                            <span>{{detailsObj.grossWeight}}吨</span>
                        </div>
                        <div class="item">
                            <span>皮重:</span>
                            <span>{{detailsObj.tareWeight}}吨</span>
                        </div>
                        <div class="item">
                            <span>净重:</span>
                            <span>{{detailsObj.netWeight}}吨</span>
                        </div>
                    </div>
                    <hr />
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>实际总重量:</span>
                            <span>{{detailsObj.actualWeight}}吨</span>
                        </div>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>运单总重量:</span>
                            <span>{{detailsObj.deliveryWeight}}吨</span>
                        </div>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>确认重量:</span>
                            <span>{{confirmWeight}}吨</span>
                        </div>
                    </div>
                    <div class="msg" v-if="detailsObj.source != 2">
                        <div class="item">
                            <span>确认类型:</span>
                            <span v-if="detailsObj.confirmWeightType == 0">运单量</span>
                            <span v-if="detailsObj.confirmWeightType == 1">实际量</span>
                            <span v-if="detailsObj.confirmWeightType == 2">最小量</span>
                            <span v-if="detailsObj.confirmWeightType == 3">输入量</span>
                        </div>
                    </div>
                </div>
            </div>
            <hr />
            <div class="val1">
                <h2>
                    <span v-if="detailsObj.source == 2">图片信息</span>
                    <span v-else>进出场图片</span>
                </h2>
                <div class="tip" v-show="enterImgList.length>0">
                    <p>进场图片</p>
                    <ul>
                        <li v-for="(val,i) in enterImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr v-show="enterImgList.length>0" />
                <div class="tip" v-show="outImgList.length>0">
                    <p>出场图片</p>
                    <ul>
                        <li v-for="(val,i) in outImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tip" v-show="MImgList.length>0">
                    <p>收料图片</p>
                    <ul>
                        <li v-for="(val,i) in MImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <hr v-show="MImgList.length>0" />
                <div class="tip" v-show="DImgList.length>0">
                    <p>签名图片</p>
                    <ul>
                        <li v-for="(val,i) in DImgList" :key="i">
                            <div class="demo-image__preview">
                                <el-image :src="val" :preview-src-list="[val]"></el-image>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="val1" v-show="detailsObj.source == 2">
                <h2>收料地点</h2>
                <div id="container55" class="container" style="height:500px;margin-top:10px"></div>
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getWeighNoteDetail,
    getAnalysisSupplierWeighNoteList,
} from "@/api/api.js";
export default {
    data() {
        return {
            previewList: [],
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            diffResult: "",
            list: [],
            flag: true,
            obj: {},
            detailsModal: false,
            detailsObj: {},
            enterImgList: [],
            outImgList: [],
            imgList: [],
            MImgList: [],
            DImgList: [],
            noteMatList: [],
            confirmWeight: "",
            mat_flag: true,
            sub: -1,
            sendSupplierName: "",
        };
    },
    methods: {
        setPreview(src) {
            this.previewList = [];
            this.previewList.push(src);
        },
        //供应商明细
        getMatDetailsList() {
            let params = {
                sendSupplierId: this.$route.query.id,
                type: 1,
                diffResult: this.diffResult,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            };
            getAnalysisSupplierWeighNoteList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.sendSupplierName = this.list[0].sendSupplierName;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //材料类别
        pageChange(index) {
            this.pageNum = index;
            this.getMatDetailsList();
        },
        goBack() {
            this.$router.go(-1);
        },
        getCategoryType(type) {
            if (type == 0) {
                this.flag = true;
                this.diffResult = "";
            } else if (type == 1) {
                this.flag = false;
                this.diffResult = -1;
            }
            this.getMatDetailsList();
        },
        getDtails(rows) {
            this.confirmWeight = rows.confirmWeight;
            this.detailsModal = true;
            this.enterImgList = [];
            this.imgList = [];
            this.outImgList = [];
            this.MImgList = [];
            this.DImgList = [];
            let params = {
                id: rows.weighNoteId,
            };
            getWeighNoteDetail(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.detailsObj = res.data;
                        this.noteMatList = res.data.noteMatList;
                        if (this.detailsObj.noteImgList.length > 0) {
                            this.detailsObj.noteImgList.forEach((i) => {
                                if (i.type == 1) {
                                    //进场图片
                                    this.enterImgList.push(i.imgUrl);
                                } else if (i.type == 2) {
                                    //出场图片
                                    this.outImgList.push(i.imgUrl);
                                } else if (i.type == 3) {
                                    //运单图片
                                    this.imgList.push(i.imgUrl);
                                } else if (i.type == 4) {
                                    //移动验收
                                    this.MImgList.push(i.imgUrl);
                                } else if (i.type == 5) {
                                    //电子签名
                                    this.DImgList.push(i.imgUrl);
                                }
                            });
                        }
                        if (this.detailsObj.source == 2) {
                            var map = new AMap.Map("container55", {
                                zoom: 14,
                                center: [res.data.lng, res.data.lat],
                            });
                            var marker;
                            marker = new AMap.Marker({
                                map: map,
                                icon:
                                    "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                                position: [res.data.lng, res.data.lat],
                                offset: new AMap.Pixel(-20, -40),
                            });
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getFlag(type, item, i) {
            this.mat_flag = !type;
            if (this.mat_flag) {
                this.sub = -1;
            } else {
                this.sub = i;
            }
        },
    },
    mounted() {
        this.obj = JSON.parse(localStorage.getItem("mat_obj"));
        this.getMatDetailsList();
    },
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/base.less";
/deep/.el-image-viewer__wrapper {
    top: 0;
    left: 200px;
    .el-icon-circle-close {
        color: #fff;
    }
    .el-image-viewer__prev,
    .el-image-viewer__next {
        display: none;
    }
}
</style>
